<template>
	<div class="z_logoin">
		<canvas id="canvas"></canvas>
		<!-- 登录 -->
		<div class="login size14">
			<div v-loading = 'loading' class="login-main">
				<img :src="logo">
				<ul class="fl">
					<li>
						<span class="fl">账号</span>
						<input type="text" v-model="form.username" placeholder="请输入关键字">
					</li>
					<li>
						<span class="fl">密码</span>
						<input type="password" v-model="form.password" placeholder="请输入密码">
					</li>
					<div class="Login-button hand" @click="login">立即登录</div>
				</ul>
			</div>
		</div>
		<!-- 底部 -->
		<div class="bottom2 text-center">Copyright ALL Rights Reserved.上海融酒网络科技有限公司 版权所有</div>
	</div>
</template>
<script>
	export default {
		name: 'logIn',
		data() {
			return {
				logo: require('@/assets/logo.png'),
				form:{
					username: '',
					password: ''
				},
				loading:false
			}
		},
		created() {
			document.title = "融酒后台管理系统";
			// localStorage.removeItem("access_token");
			var that = this;
			document.onkeydown = function(e) {
				var keyNum = window.event ? e.keyCode : e.which;
				if(keyNum == 13) {
					that.login();
				}
			};
		},
		mounted() {
			frame();
		},
		methods: {
			login() {
				if(this.form.username == ""){
					return this.$msg.warning("请输入用户名～");
				}
				if(this.form.password == ""){
					return this.$msg.warning("请输入密码～");
				}
				this.loading = true;
				this.$post("authLogin",this.form)
				.then((res)=>{
					this.loading = false;
					if(res.code == 200){
						localStorage.setItem("access_token",res.data);
						window.cancelAnimationFrame(window.animateTimer);
						this.$router.replace('shop');
					}else{
						this.$msg.warning(res.message);
					}
				})
				.catch((e)=>{
					console.log(e);
					this.loading = false;
					this.$msg.error("网络或服务器错误");
				})
				
			}
		},

	}
</script>
<style lang="less" scoped>
	.z_logoin {
		width: 100%;
		height: 100%;
		color: #a4a5a7;
		background-size: 100% 100%;
		overflow: hidden;
		#canvas {
			position: absolute;
			width: 100%;
			height: 100%;
			z-index: 0;
		}
		.login {
			width: 750px;
			overflow: hidden;
			position: absolute;
			z-index: 999;
			left: 50%;
			transform: translate(-50%, -50%);
			top: 50%;
			img {
				width: 235px;
				height: 99px;
				background: url(../assets/images/s.png) no-repeat right;
				padding-right: 30px;
				margin-right: 30px;
				float: left;
			}
			.login-main {
				background-color: rgba(255, 255, 255, 0.2);
				overflow: hidden;
				padding: 100px 0;
				border-radius: 4px;
				display: flex;
				flex-direction: row;
			}
			ul {
				width: 407px;
				li {
					width: 280px;
					padding: 0 10px;
					height: 38px;
					line-height: 38px;
					display: block;
					background-color: rgba(0, 0, 0, 0.2);
					border-radius: 6px;
					color: #fff;
					margin-bottom: 10px;
					span {
						background: url(../assets/images/ss.jpg) no-repeat right;
						padding-right: 15px;
						margin: 0 15px;
					}
					input {
						background: none;
						border: none;
						color: #fff;
						line-height: 38px;
					}
					input::-webkit-input-placeholder,
					textarea::-webkit-input-placeholder {
						color: #fff;
					}
					input:-moz-placeholder,
					textarea:-moz-placeholder {
						color: #fff;
					}
					input::-moz-placeholder,
					textarea::-moz-placeholder {
						color: #fff;
					}
					input:-ms-input-placeholder,
					textarea:-ms-input-placeholder {
						color: #fff;
					}
				}
				.Login-button {
					width: 300px;
					height: 38px;
					line-height: 38px;
					background-color: #e97c05;
					color: #fff;
					text-align: center;
					border-radius: 6px;
					margin-top: 20px;
				}
			}
		}
		.bottom2 {
			color: #fff;
			padding-top: 2.5px;
			position: fixed;
			bottom: 40px;
			text-align: center;
			left: 0;
			right: 0;
		}
	}
</style>